<template>
    <div class="wrap" style="z-index: 1000;">
           <div class="top">争 做 文 明 “ 观 察 员 ” 随 手 拍 云 平 台</div>  
           <div class="bgPhoto" :style="{'background-image': 'url(' + newBg + ')', 
                'background-repeat':'no-repeat',
                'background-size':'cover !important',
                'background-position': 'center bottom',
                'opcity': '1' }"> 
            <span style="display:none">1 </span> </div>   
            <!-- <p class="topWord">点击下方按钮上传照片 争当基层治理“轻骑兵” </p> -->
       <van-form style="z-index: 1000;margin-top: 55px;" @submit="onComplexSub" ref="mainForm">
            <van-cell-group inset>          
                <van-field name="uploader" label="上传相册照片/拍照"  :rules="[{ required: true, message: '请上传' }]" >
                    <template #input>
                        <van-uploader :max-size="9990* 1024" v-model="plexPic" :max-count="2" :after-read="afterRead" :before-read="beforeRead" >
                              <template #preview-cover="{ file }">
                            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                        </template>
                        </van-uploader>
                    </template>                      
                </van-field>
                <p style="color:gray; background:lightcyan;width: 70%;margin:10px auto;border-radius: 5px;"> <b>Tips</b> 图片限制上传<b>10M</b>以下大小的文件 </p>
                <van-field                 
                    name="actionLoac"
                    v-model="actionLoac"
                    label="所在地区"                 
                    :rules="[{ required: true, message: '请选择/填写地址' }]"
                />                    
                <div class="baidumap" id="localtion-box" >  </div>  
                <van-field
                    v-model="actionPeople"
                    name="actionPeople"
                    label="姓名"
                    placeholder="姓名"
                    :rules="[{ required: true, message: '请填写' }]"
                />
                <!-- <van-field
                    v-model="company"
                    name="company"
                    label="公司名称(可选)"
                    placeholder="公司名称"
                    :rules="[{ required: true, message: '请填写' }]"
                /> -->
                <van-field
                    v-model="company"
                    is-link
                    readonly
                    name="company"
                    label="公司名称 (可选)"
                    placeholder="点击选择公司"
                    @click="showComPicker = true"
                    :rules="[{ required: false, message: '请选择' }]"
                    />
                    <van-popup v-model:show="showComPicker" position="bottom">
                    <van-picker
                        :columns="comColumns"
                        @confirm="onComConfirm"
                        @cancel="showComPicker = false"
                    />
                </van-popup>
                <van-field
                    v-model="actionPhone"
                    name="actionPhone"
                    label="联系方式"
                    placeholder="联系方式"
                    :rules="[{ required: true, message: '请填写' }]"
                />

                <van-field name="actionType" label="反馈信息"  :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                        <van-radio-group v-model="actionType" direction="horizontal">                            
                            <van-radio class="typeRadio" name="不文明行为" @click="handleRadio">不文明行为 </van-radio> <br>
                            <van-radio class="typeRadio" name="安全隐患" @click="handleRadio">安全隐患 </van-radio> <br>
                            <van-radio class="typeRadio" name="助人为乐" @click="handleRadio">助人为乐 </van-radio> <br>
                            <van-radio class="typeRadio" name="见义勇为" @click="handleRadio">见义勇为 </van-radio> <br>
                            <van-radio class="typeRadio" name="敬业奉献" @click="handleRadio">敬业奉献 </van-radio> <br>
                            <van-radio class="typeRadio" name="孝老爱亲" @click="handleRadio">孝老爱亲 </van-radio> <br>
                            <van-radio class="typeRadio" name="诚实守信" @click="handleRadio">诚实守信 </van-radio> <br>
                            <van-radio class="typeRadio" name="其他" @click="handleRadio">其他 </van-radio> 

                            <!-- <van-radio name="其他">                              
                        </van-radio>  -->
                        <!-- <van-field v-model="otherAction" label="其他" />     -->
                        </van-radio-group>
                    </template>
                </van-field>
                <p style="color:gray;text-align: center;background-color: lightcyan;border-radius: 5px;text-align: center;"> 
                    <b>不文明行为</b>包括垃圾乱扔、车辆乱停、广告乱贴等； </p>
                <p  style="color:gray;background-color: lightcyan;border-radius: 5px;text-align: center;">
                    <b>安全隐患</b>包括护栏等设施损坏，交通标志不完善，绿化植被遮挡、照明不足等</p>
                <!-- <van-field name="manType" label="行为主体"  :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                        <van-radio-group v-model="manType" direction="horizontal">
                        <van-radio name="公司">公司 </van-radio> <br>
                        <van-radio name="个人">个人 </van-radio> <br>
                         <van-radio name="其他">                              
                        </van-radio>  
                        <van-field v-model="otherAction" label="其他" />     
                        </van-radio-group>
                    </template>
                </van-field> -->
                         
            </van-cell-group>
           
            <!-- <p style="color:darkgoldenrod"> Tips2 缩放点击地图获取地址, 手机浏览器默认关闭位置请求，需要用户设置手机为允许/询问后方可获取精确的定位 </p> -->
            <div style="margin: 16px auto;width: 50%; z-index: 1000;">
                <van-button round block type="primary" native-type="submit">
                提 交 {{ lodingStatus }}
                </van-button>
            </div>
        </van-form>
        <div class="downPic"> 
            <!-- <van-image
                width="9rem"
                height="5rem"
                fit="contain"
                src="https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/%E4%B8%AA%E4%BA%BA%E8%A1%8C%E4%B8%BA%E6%B4%BB%E5%8A%A8%E7%9B%91%E6%B5%8B.png?sign=889efa1066e888513ef9ed5312610d7c&t=1663207439"
            /> -->
            <p style="visibility:hidden;">11</p>
        </div>
        <van-notify v-model:show="notifyShow" type="success">
            <van-icon name="bell" style="margin-right: 4px;" />
            <span>正在上传图片，请勿退出页面</span>
        </van-notify>
    </div>



</template>

<script setup >
import { ref, onMounted, getCurrentInstance, inject, watch, reactive  } from 'vue';
import { toRaw } from '@vue/reactivity'
import {useRouter, useRoute} from 'vue-router'
import moment from 'moment'
import { Dialog, Toast } from 'vant'

const prefix = 'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la'
const comPlexArr = {
    '北区': ['天悦星院', '星福尚岭新筑', '越秀滨江盛悦', '万科金域国际', '泮海蓝湾'],
    '南区': ['合景领峰', '合景叠翠峰', '嘉华新都会', '帕佳图双子星', '江悦城', '恒大御景半岛', '朗晴新天地', '越秀天悦文华'],
    '中区': ['东华名岸', '帕佳图六里', '二沙岛', '世纪城圣廷苑']
}
let columns = ref(['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华']);
const mainForm = ref(null)
const plexArea = ref('江门市');  // 区域
const plexName = ref('');  // 小区名
const comArray = reactive() // 待用小区分类数组
const plexPic = ref([]);   // 图片路径
const plexBuild = ref('')  // 小区座型
const fileObj = ref({})    // 要上传的文件File对象
const picker = ref(null);
const actionPeople = ref('') // 行为人
const actionPhone = ref('')
const actionType = ref('') // 行为性质
const otherAction = ref('')
const manType = ref('')  // 行为人归属
const company = ref('')  // 快递公司名称（中通圆通）
const state = reactive({
  point: { lng:113.090061, lat:  22.618055 }	
})
const actionLoac = ref('')  // 地图地址
const newBg = 'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/nologoH5-720x1560.png'
// https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/nologoH5-720x1560.png
const showComPicker = ref(false); //选择公司弹窗
const comColumns = ['德邦', '京东','顺丰','中通', '圆通','韵达','申通','极兔','邮政','饿了么','美团' ];
const hasLogin = ref(false)
const lodingStatus = ref('')
const notifyShow = ref(false)

// 地图初始化
const init = () => {
    //  let BMapGL = window.BMapGL; // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
     console.log('看看地图', BMapGL)
     let map = new BMapGL.Map("localtion-box"); // allmap必须和dom上的id一直
     let point = new BMapGL.Point(113.090061, 22.618055);
     map.centerAndZoom(point, 15); 

     let cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
     map.addControl(cityCtrl);
     map.centerAndZoom(
       new BMapGL.Point(state.point.lng, state.point.lat),
       14
     ); // 初始化地图,设置中心点坐标和地图级别
    //  map.setCurrentCity("江门");
     map.enableScrollWheelZoom(true);
     var geoc = new BMapGL.Geocoder();
     var marker
     var label
    // //  var point = new BMapGL.Point(state.point.lng, state.point.lat)
     marker = new BMapGL.Marker(point);// 创建标注
     var geolocation = new BMapGL.Geolocation();
     geolocation.enableSDKLocation();
     geolocation.getCurrentPosition( function (rs) {
             var mk = new BMapGL.Marker(rs.point);
                map.addOverlay(mk);
                map.panTo(rs.point);
                console.log('您的位置：' + rs.point.lng + ',' + rs.point.lat + JSON.stringify(rs.address) );
                actionLoac.value = `${rs.address.city}${rs.address.district}${rs.address.street}${rs.address.street_number}`
    //    label = new BMapGL.Label(`${rs.address},经度:${state.point.lng},纬度:${state.point.lat}`, {       // 创建文本标注
    //      position: state.point,                       
    //      offset: new BMapGL.Size(10, -20)         
    //    })
    //    map.addOverlay(label);
    //    map.addOverlay(marker);
     })
     map.addEventListener('click', function (e) {
        var pt = e.latlng;
        geoc.getLocation(pt, function(rs){
        var addComp = rs.addressComponents;
        let datalocal = addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
        actionLoac.value = datalocal
    })
       point = new BMapGL.Point(e.point.lng, e.point.lat);
       state.point = point
     });
   };
 
// 实际先在index.html引入
const loadMapScript = () => {
  // 此处在所需页面引入资源就是，不用再public/index.html中引入
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.className = "map"; // 给script一个类名
  script.src = "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=P1XUD8FB5DgwoXjqsD2rZVzQxkiXt54I";
  // 此处需要注意：申请ak时，一定要应用类别一定要选浏览器端，不能选服务端，不然地图会报ak无效
  script.onload = () => {
    // 使用script.onload，待资源加载完成，再初始化地图
    console.log('map init')
    init();
  };
  let mapDom= document.getElementsByClassName("map");
  if (mapDom) {
    // 每次append script之前判断一下，避免重复添加script资源标签
    for (var i = 0; i < mapDom.length; i++) {
      document.body.removeChild(mapDom[i]);
    }
  }
  document.body.appendChild(script);
};


const onComplexSub = async(values) => {
      lodingStatus.value = '录入中....'
      Toast.loading({
        message: '上传提交中',
        forbidClick: true,
        loadingType: 'spinner',
       })
      notifyShow.value = true
      console.log('submit', values,  (plexPic.value) );
    //   let confirmDate = moment(new Date()).format("YYYY-MM-DD hh:mm:ss")  // 时间格式     
    //   let complex = JSON.parse(JSON.stringify(plexPic))
    //   console.log('FileSub2', typeof( complex ), fileObj.value ) //   mainForm.value.getValidationStatus()
      let timeNow = Date.now()
      let pciUrl = `city_action/${actionPeople.value}_${values.actionType}_${timeNow}.jpg`  // 只上传一张时的图片路径
      let viUrlPre = 'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/'  //   https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/
    //   const _ = db.command
      let picUrlist = []
    // 判断相册数量
    console.log('1张？', plexPic.value.length==1)
    if(plexPic.value.length==1){
        console.log('上传1张')
        cloud.uploadFile({
            // 云存储的路径
            cloudPath: pciUrl,
            // 需要上传的文件，File 类型
            filePath: fileObj.value,           
        })
        .then(async(res) => {
            console.log('上传成功1张', res)
            await handleServer(res, values, pciUrl, viUrlPre )
        })
        .catch(err=>{
            Toast('XX上传未成功1张'+ JSON.stringify( err ))
            console.log('XX上传未成功1张'+ JSON.stringify( err ), err)
            lodingStatus.value = ''
            notifyShow.value = false
        })
    }else{
        for( let [index,item] of plexPic.value.entries()){       
            console.log('上传N张', item.file, index)
            let uploadPath = `city_action/${actionPeople.value}_${values.actionType}_${timeNow}_${index}.jpg`
            await cloud.uploadFile({  // 关键key 加await
            // 云存储的路径
                cloudPath: uploadPath,
                // 需要上传的文件，File 类型
                filePath: item.file,           
                })
                .then(async(res) => {
                    console.log('上传成功1张 索引', index, res)
                    Toast(`上传完成第${index+1}张`)
                    picUrlist.push(viUrlPre+uploadPath)
                    // 判断上传最后一张的时候，提交数据到后台
                    if(index==1){
                        // setTimeout(async()=>{
                        //     console.log('上传成功,准备提交到云端', picUrlist) 
                        //     // todo 提交数据到后台
                        //     await handleServer(res, values, picUrlist, viUrlPre )
                        // }, 1500)    
                        console.log('上传完成？,准备提交到云端', picUrlist)                                             
                        await handleServer(res, values, picUrlist, viUrlPre )
                    }
                })
        }
        console.log('看看 pic upload 顺序')

    }


    }
// 处理提交到服务器部分
const handleServer = async(res,values,pciUrl,viUrlPre)=>{
            let confirmDate = moment(new Date()).format("YYYY-MM-DD hh:mm:ss")  // 时间格式     
            let complex = JSON.parse(JSON.stringify(plexPic))
            console.log('FileSub2', typeof( complex ), fileObj.value ) //   mainForm.value.getValidationStatus()
            let timeNow = Date.now()
            // let pciUrl = `city_action/${actionPeople.value}_${timeNow}.jpg`  // 只上传一张时的图片路径
            // let viUrlPre = 'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/'  //   https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/
            const _ = db.command
            let serverPic = '' // 如果是单张，或数组 判断是否
                if((typeof pciUrl=='string') && pciUrl.constructor==String){ // 单张字符串
                    serverPic =  [viUrlPre + pciUrl] 
                } else{  // 数组 多张图片的情况
                    serverPic = pciUrl 
                }
            let hasPeople =  await hasRecord(values.actionPeople)
            
            if(hasPeople){  // 已存在用户,增加次数
                await db.collection('adroom').where({ name: values.actionPeople })
                    .update({
                        actionFrc: _.inc(1),
                        photo: _.push(serverPic)
                    })
                    Toast({
                        message: '录入成功（二次）',
                        icon: 'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/%E6%B1%9F%E5%B0%8F%E9%A9%AC2.png',
                    })
                notifyShow.value = false
                plexPic.value = []
                actionPeople.value = ''
                actionPhone.value = ''
                lodingStatus.value = ''
                window.location.href = 'https://28208473-2.fkhdmain.com/28208473/vIu9bxuL25LdflHaHg7Npw/load-28208473-2.html?style=79&_source=1'
            }else{
                //新增数据             
                await db.collection('adroom').add({
                        "actionLocal": values.actionLoac,
                        "name": values.actionPeople,
                        "connectNum": values.actionPhone,  // 联系方式
                        "actionType": values.actionType, // 行为性质
                        // 'manType': values.manType,                    // 主体类型
                        'actionFrc': 1,  // 提交次数(排行关键参数之一)
                        "createTime": confirmDate , // 服务器时间,
                        "confirmStamp": timeNow, // 时间戳
                        'otherAction': otherAction.value,  // 其他类型事件，如果有的话
                        'photo': serverPic ,   
                        'verify': false,
                        'company': values.company
                    }).then(res=>{
                        console.log('提交录入新行为事件!@@@@', res)                   
                        Toast({
                            message: '录入成功 ! !',
                            icon: 'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/%E6%B1%9F%E5%B0%8F%E9%A9%AC2.png',
                        })
                        Toast.clear()
                        notifyShow.value = false
                        plexPic.value = []
                        actionPeople.value = ''
                        actionPhone.value = '' 
                        lodingStatus.value = ''
                        window.location.href = 'https://28208473-2.fkhdmain.com/28208473/vIu9bxuL25LdflHaHg7Npw/load-28208473-2.html?style=79&_source=1'
                     })
                        .catch(err=>{
                            Toast('录入未成功'+ JSON.stringify( err ))                            
                            notifyShow.value = false
                        })
            }
        // }).catch(err=>{
        //     Toast('上传未成功'+ JSON.stringify( err ))
        // })
}
// 是否存在已录入的行为人
const hasRecord = async(people)=>{
    let result = await db.collection('adroom').where({
        "name": people
    }).get()
    console.log('录入过了吗', result.data.length>0 ) 
    return  result.data.length>0
}
const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      console.log('提交了一个file，但是未上传', file.file, typeof(file.file));
      console.log('图片数组？', plexPic.value[0].file, plexPic.value.length )
      fileObj.value = file.file
    };

const beforeRead = (file) => {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' ) {
        Toast('请上传 JPG/PNG 格式图片');
        return false;
      }
      return true;
    }

const onPickChange=(value, index)=>{
    plexName.value = value
    console.log('HHH', plexName.value, index)
}
// 单选性质样式控制器
const handleRadio = (dataDom)=>{
    console.log('单选框', dataDom)
    let allR = document.querySelectorAll(".typeRadio")
    for(let i of allR){       
        i.children[1].style.background = 'lightgray'
        i.children[1].style.color = 'black'
        // i.children[0].children[0].style.background = 'white'
        // i.children[0].style.color = 'white'
    }
    dataDom.target.style.background = 'darkorange'
    // dataDom.target.style.padding = '5px'
    dataDom.target.style.color = 'white'
}
const onComConfirm = (value) => {
      company.value = value;
      showComPicker.value = false;
    };
watch(plexArea, (newValue, oldValue) => { //直接监听 区域变化，联动滑块
	console.log("count改变了", newValue)
    // columns.value = comPlexArr[newValue]
    console.log('新书一组', columns.value)
    picker.value.setColumnValues(0, columns.value);
    // plexName.value = comPlexArr[newValue][2]
})

onMounted(async()=>{
    // const db = cloud.database();  
    // db.collection("housing")
    //     // .doc("todo-identifiant-aleatoire")
    //     .update({
    //         // 表示将 done 字段置为 true
    //         isValid: true
    //     })
    //     .then((res) => {
    //         console.log(res.data);
    //     });
    loadMapScript()
    const loginState = cloud.auth().hasLoginState();
    if (loginState) {
        // 登录态有效
        let user = cloud.auth().currentUser
        console.log('登录主体', user.email)
    } else {
    // 没有登录态，或者登录态已经失效
    }
    let allR = document.querySelectorAll(".typeRadio")
    for(let i of allR){
        console.log(i)
        i.children[1].style.background = 'lightgray'
        i.children[1].style.padding = '5px'
        i.children[1].style.color = 'black'
        i.children[0].children[0].style.background = 'white'
        i.children[0].children[0].style.opacity = 0
    }
    // let confirmDate = moment(new Date()).format("YYYY-MM-DD hh:mm:ss")  
    // console.log('服务器time', confirmDate)
})

const cloud = inject('$cloud')
const db = cloud.database();  

</script>

<style lang="scss">
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
        // background-image: url('https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/nologoH5-720x1560.png');
        background-size: cover;
        background-repeat: no-repeat;
        // position: fixed;
    }
    .activeIcon{
        background-color: red;
    }
    .inactiveIcon{
        background-color:  green;
    }
    .topWord{
        color: #fff;
        background: rgba(34, 42, 2, 0.3);
        font-size: 14px;
    }
    .top{
        margin: 5px auto;
        margin-bottom: 56px;
        width: 100%;
        // background: url('https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/%E4%B8%AA%E4%BA%BA%E8%A1%8C%E4%B8%BA%E6%B4%BB%E5%8A%A8%E7%9B%91%E6%B5%8B.png?sign=889efa1066e888513ef9ed5312610d7c&t=1663207439');
        background-image: url('https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/nologoH5-720x1560.png');
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 16px;
        background-size: contain;
        background-repeat: no-repeat;
        // background-position: 5% 10%;
        color: #fff;
        background: darkorange;
        padding: 10px;
        position: fixed;
        z-index: 100;
        top: 1px;
    }
    .tree{
        height: 500px !important;
    }
    .bgPhoto {
        background: 'url(' + v-bind(newBg) + ')';     
        background-repeat:'no-repeat';
        background-size: cover !important ;
        // background: rgba(120, 101, 101, 0.1);
        opacity: 0.9;      
        height: 110% !important;
        position: fixed;
        z-index: -1;
        width: 100%;
        top: -10px;
    }
    .titleSlot{
        color: white ;
        font-weight: bold;
        background-color: darkgoldenrod;
        padding: 5px;
        width: 20px;
        font-size: 20px;
    }
    .kklist{
        width: 95%;
        margin: 0px auto;
    }
    .wrap{
        background: rgb(247, 248, 250, 0.1);
        height: 100%;
        // height: 1000px;
    }

    .ktv_item{
        background-color: white;
        position: relative;
        height: 45px;
    }
    .kk_sort {
        position: absolute;
        left: 5px;
        top:5px;
        font-size: 29px;
        color: red;
        font-weight: bold;
    }
    .kk_name{
        font-size: large;
        color: darkred;
        font-weight: bold;
         position: absolute;
        left: 29px;
        top:14px;
    }
    .score_num{
        color: darkgoldenrod;
        font-size: 20px;        
    }
    .kk_score {
            position: absolute;
            left: 99px;
    }
    .sortTitle {
            position: relative;
            left: -100px;
            margin-bottom: 4px;
            top: -10px;
            font-weight: bold;
            font-size: 19px;
    }
    .sortTitleAll{
            position: relative;
            left: -130px;
            margin-bottom: 4px;
            top: -10px;
            font-weight: bold;
            font-size: 19px;   
    }
.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
  .baidumap{
      width: 210px;
      height: 200px;
      margin-left: 20%;
      visibility: hidden;
      position: absolute;
      bottom: 1px;
  }
  .downPic{
        // background: lightblue ;
        position: fixed;
        bottom: 1px;
        width: 40px;
        opacity: 0.4;
        z-index: 1;
        height: 20px;
        left: 2%;
        background: url('https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/%E4%B8%AA%E4%BA%BA%E8%A1%8C%E4%B8%BA%E6%B4%BB%E5%8A%A8%E7%9B%91%E6%B5%8B.png?sign=889efa1066e888513ef9ed5312610d7c&t=1663207439');
        background-repeat: no-repeat;
        // background-size: cover;
    }
    .typeRadio{
        margin-bottom: 9px;
        // position: r;
        // left: 1px;
    }
// .van-radio__icon--checked{
//     background-color: antiquewhite;
//     width: 100%;
// }
</style>